<template>
<div class="wrapper">
    <div class="container-fluid">
        <div class="page-title-box">
            <div class="btn-group ">
                <ol class="breadcrumb hide-phone p-0 m-0">
                    <li class="breadcrumb-item">
                        <router-link to="/">{{$t('breadcrumb.index')}}</router-link>
                    </li>
                    <li class="breadcrumb-item active">{{$t('breadcrumb.broker')}}</li>
                </ol>
            </div>
        </div>
        <div class="row justify-content-center">
            <div id="main" class="card-box col-10">
                <div class="row justify-content-md-center">
                    <div class="col-7">
                        <p class="h3">{{$t('breadcrumb.broker')}}</p>
                    </div>
                </div>
                <div class="row justify-content-md-center">
                    <div class="col-5">
                        <form>
                            <div class="form-group">
                                <label for="level" class="col-form-label">{{$t('label.agency.level')}}</label>
                                <select id="level" class="custom-select" v-model="form.level">
                                    <option value="" selected>{{$t('label.select')}}</option>
                                    <option v-for="level in levels" :key="level.id" :value="level">
                                        {{level.levelname}}
                                    </option>
                                </select>
                                <input type="text" name="level" :value="form.level.level"
                                       style="display: none"
                                       data-parsley-required="true" :data-parsley-required-message="$t('msg.required.error')">
                            </div>
                            <div class="form-group">
                                <label class="col-form-label">{{$t('label.agency.directly')}}</label>
                                <input type="text" class="form-control" name="direct_nums_to"
                                       data-parsley-type="integer" :data-parsley-type-message="$t('msg.integer.error')"
                                       data-parsley-min="1" :data-parsley-min-message="$t('msg.integer.min.error',[0])"
                                       data-parsley-required="true" :data-parsley-required-message="$t('msg.required.error')">
                            </div>
                            <div class="form-group">
                                <label class="col-form-label">{{$t('label.deposit.amount')}}</label>
                                <input type="text" class="form-control" name="deposit_nums_to"
                                       data-parsley-type="integer" :data-parsley-type-message="$t('msg.integer.error')"
                                       data-parsley-min="1" :data-parsley-min-message="$t('msg.integer.min.error',[0])"
                                       data-parsley-required="true" :data-parsley-required-message="$t('msg.required.error')">
                            </div>
                            <div class="pull-right mt-1">
                                <router-link to="/withdraw" class="btn btn-link text-secondary">{{$t('btn.return')}}</router-link>
                                <button type="button" class="btn btn-gradient" @click="apply($event)">{{$t('btn.ok')}}</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
export default {
    name: "broker",
    data() {
        return {
            levels: {},
            form: {
                level: ''
            },
            t: {
                "ok": this.$t('btn.ok'),
                "gt": this.$t('msg.gt'),
                "msg_suc": this.$t('msg.ajax.success'),
                "msg_err": this.$t('msg.ajax.fail'),
            }
        }
    },
    created() {
        const vm = this;
        const api = vm.api;
        const http = vm.$http;
        http.get(api + 'UserInfo/getagantlevel')
            .then(function (response) {
                const data = response.data;
                if ('0' === data.code) {
                    vm.levels = data.data;
                }
            })
            .catch(function (error) {
                console.log(error)
            });
    },
    computed: {
        direct() {
            if (!this.form.level) return '';
            if (!this.form.level.direct_nums_to) return this.t.gt + ' ' + this.form.level.direct_nums_from;
            return this.form.level.direct_nums_from + ' - ' + this.form.level.direct_nums_to;
        },
        deposit() {
            if (!this.form.level) return '';
            if (!this.form.level.deposit_nums_to) return this.t.gt + ' ' + this.form.level.deposit_nums_from;
            return this.form.level.deposit_nums_from + ' - ' + this.form.level.deposit_nums_to;
        }
    },
    methods: {
        apply: function (event) {
            const vm = this;
            let $form = $(event.target).closest('form');
            if ($form.parsley().validate()) {
                const api = vm.api;
                const http = vm.$http;

                http.post(api + 'UserInfo/agentapply', $form.serialize())
                    .then(function (response) {
                        const data = response.data;
                        if ('0' === data.code) {
                            swal({
                                title: vm.t.msg_suc,
                                icon: 'success',
                                button: {
                                    text: vm.t.ok,
                                    className: 'btn btn-gradient',
                                }
                            })
                        } else {
                            swal({
                                title: vm.t.msg_err,
                                text: data.msg,
                                icon: 'info',
                                button: {
                                    text: vm.t.ok,
                                    className: 'btn btn-gradient',
                                }
                            })
                        }
                    })
                    .catch(function (error) {
                        console.log(error)
                    });
            }
        }
    }
}
</script>